<app-workflow-breadcrumb [project]="project" [workflow]="workflow" [workflowRun]="workflowRun">
    <div class="right floated" [title]="'favorite_add_btn' | translate">
        <div class="ui active small inline loader" *ngIf="loadingFav"></div>
        <i class="pointing star icon" *ngIf="!loadingFav" [class.pointing]="!loading"
            [ngClass]="{'animated infinite pulse' : loadingFav}" [class.favorite]="workflow?.favorite"
            [class.unfavorite]="!workflow?.favorite" (click)="updateFav()"></i>
    </div>
    <div class="right floated labelFeature" [title]="'workflow_from_repository_btn' | translate">
        <a class="ui label small basic" [class.green]="workflow && workflow.from_repository"
            [class.orange]="workflow && !workflow.from_repository && workflow.as_code_events && workflow.as_code_events.length > 0"
            [class.grey]="workflow && !workflow.from_repository && (!workflow.as_code_events || workflow.as_code_events.length === 0)"
            suiPopup [popupTemplate]="popupFromRepository" popupPlacement="bottom right" popupTrigger="outsideClick"
            #popup="suiPopup">
            <i class="code icon"></i>as code
        </a>
        <ng-template let-popup #popupFromRepository>
            <div class="content infoPopup">
                <ng-container *ngIf="workflow && workflow.from_repository">
                    <p>
                        {{ 'workflow_from_repository' | translate: {repo: workflow.from_repository} }}
                    </p>
                </ng-container>
                <ng-container
                    *ngIf="workflow && !workflow.from_repository && (!workflow.as_code_events || workflow.as_code_events.length === 0)">
                    <p>{{'workflow_repository_help_line_1' | translate}}</p>
                    <p>{{'workflow_repository_help_line_2' | translate}}</p>
                    <div class="footer">
                        <div>
                            <div class="ui list">
                                <a class="item" target="_blank"
                                    href="https://ovh.github.io/cds/docs/tutorials/init_workflow_with_cdsctl/">{{'common_read_more'
                                    | translate}}</a>
                            </div>
                        </div>
                        <div class="migrate">
                            <button class="ui right floated mini button" *ngIf="!showButtons"
                                (click)="showButtons = true">{{'common_migrate'
                                | translate}}</button>
                            <div class="ui mini buttons" *ngIf="showButtons">
                                <button class="ui button" (click)="showButtons = false"
                                    [class.loading]="loadingPopupButton"
                                    [disabled]="loadingPopupButton">{{'common_cancel' | translate}}</button>
                                <div class="or"></div>
                                <button class="ui positive button" (click)="migrateAsCode()"
                                    [class.loading]="loadingPopupButton"
                                    [disabled]="loadingPopupButton">{{'btn_save' | translate}}</button>
                            </div>
                        </div>
                    </div>
                </ng-container>
                <ng-container
                    *ngIf="workflow && !workflow.from_repository && (workflow.as_code_events && workflow.as_code_events.length > 0)">
                    <p>{{ 'workflow_from_repository_pending' | translate}}</p>
                    <ul>
                        <li *ngFor="let p of workflow.as_code_events">
                            <a href="{{p.pullrequest_url}}" target="_blank">{{p.pullrequest_url}}</a>
                        </li>
                    </ul>
                    <button class="ui right floated green tiny button" (click)="resyncPR()"
                        [class.loading]="loadingPopupButton"
                        [disabled]="loadingPopupButton">{{'workflow_resync' | translate }}</button>
                </ng-container>
            </div>
        </ng-template>
    </div>
    <div class="right floated labelFeature" [title]="'workflow_from_template_btn' | translate">
        <a class="ui label small basic"
            [ngClass]="workflow && workflow.from_template ? (workflow.template_up_to_date ? 'green' : 'orange') : 'grey'"
            suiPopup [popupTemplate]="popupFromTemplate" popupPlacement="bottom right" popupTrigger="outsideClick"
            #popup="suiPopup">
            <i class="paste icon"></i>template
        </a>
        <ng-template let-popup #popupFromTemplate>
            <div class="content infoPopup">
                <div *ngIf="workflow && workflow.from_template;then fromTemplateInfo;else fromTemplateHelp"></div>
                <ng-template #fromTemplateInfo>
                    <p>{{ 'workflow_from_template' | translate}}
                        <a
                            [routerLink]="['/settings/workflow-template/' + workflow.from_template]">{{workflow.from_template}}</a>
                        <span *ngIf="!workflow.template_up_to_date" class="ui orange label mini">{{'common_not_up_to_date'
                            | translate }}</span>
                    </p>
                    <div class="ui compact menu">
                        <a class="item small" (click)="showTemplateFrom();popup.close()">
                            {{'common_update' | translate}}
                        </a>
                    </div>
                </ng-template>
                <ng-template #fromTemplateHelp>
                    <p>{{'workflow_template_help_line_1' | translate}}</p>
                    <p>{{'workflow_template_help_line_2' | translate}}</p>
                    <div class="ui list">
                        <a class="item" target="_blank" href="https://ovh.github.io/cds/docs/concepts/template">{{'common_read_more'
                            | translate}}</a>
                    </div>
                    <p>{{'workflow_template_help_line_3' | translate}}</p>
                    <div class="ui compact menu">
                        <a class="item small" (click)="initTemplateFromWorkflow();popup.close()">
                            {{'workflow_template_init_from_workflow' | translate}}
                        </a>
                    </div>
                </ng-template>
            </div>
        </ng-template>
    </div>
</app-workflow-breadcrumb>
<aside class="sidebar expanded">
    <i *ngIf="sidebarMode !== sidebarModes.RUNS" class="ui icon black close closeButton"
        (click)="changeToRunsMode()"></i>
    <div class="sidebar-toggle">
        <ng-container *ngIf="project && workflow" [ngSwitch]="sidebarMode">
            <app-workflow-sidebar-hook *ngSwitchCase="sidebarModes.EDIT_HOOK" [project]="project" [workflow]="workflow">
            </app-workflow-sidebar-hook>
            <app-workflow-sidebar-run-list *ngSwitchCase="sidebarModes.RUNS" [project]="project" [workflow]="workflow">
            </app-workflow-sidebar-run-list>
            <app-workflow-sidebar-run-node *ngSwitchCase="sidebarModes.RUN_NODE" [project]="project"
                [workflow]="workflow"></app-workflow-sidebar-run-node>
            <app-workflow-sidebar-run-hook *ngSwitchCase="sidebarModes.RUN_HOOK" [project]="project">
            </app-workflow-sidebar-run-hook>
        </ng-container>
    </div>
</aside>
<section class="content-wrap" *ngIf="!loading && workflow != null">
    <router-outlet></router-outlet>
    <app-workflow-sidebar-code [project]="project" [workflow]="workflow" [open]="asCodeEditorOpen">
    </app-workflow-sidebar-code>
    <ng-container>
        <app-workflow-template-apply-modal #templateApplyModal [project]="project" [workflow]="workflow">
        </app-workflow-template-apply-modal>
    </ng-container>
</section>
<app-workflow-save-as-code-modal [project]="project" [workflow]="workflow" #saveAsCode>
</app-workflow-save-as-code-modal>
